<!DOCTYPE html>
<html lang="en">
<head>
	<#include "../static/top.ftl" >
    <link rel="stylesheet" href="/res/assets/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="/res/assets/css/jquery.webui-popover.min.css">
    <link rel="stylesheet" href="/res/assets/css/bootstrap-select.css">
    <link rel="stylesheet" href="../../res/libs/misc/datatables/datatables.min.css">
    <link rel="stylesheet" href="../../res/assets/css/bootstrap-table.css">
    <link rel="stylesheet" href="/res/libs/bower/chosen/chosen.min.css">
    <link rel="stylesheet" href="/res/assets/css/jqcloud.css">
</head>

<body class="menubar-left menubar-unfold menubar-light theme-primary">
<!--============= start main area -->

<!-- APP NAVBAR ==========-->



<#include "../static/header.ftl" >

<!--========== END app navbar -->

<!-- APP ASIDE ==========-->


<#include "../static/menu.ftl" >
<!--========== END app aside -->
<!-- navbar search -->

<!-- APP MAIN ==========-->
<main id="app-main" class="app-main">
    <div class="wrap">
        <section class="app-content">
        <#--筛选框-->
            <div class="row">
                <div class="col-md-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <label>起始时间</label>
                                        <div class="input-group date datepicker" id="start_datapicker"
                                             data-provide="datepicker"
                                             style="width: 70%">
                                            <input type="text" class="form-control" placeholder="时间" id="start_date"
                                                   style="min-width:180px">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>结束时间</label>
                                        <div class="input-group date datepicker" data-provide="datepicker"
                                             style="width: 70%">
                                            <input type="text" class="form-control" placeholder="时间" id="end_date"
                                                   style="min-width:180px">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>品类</label>
                                        <select class="form-control" id="cate_select" style="min-width:180px">

                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>品牌</label>
                                        <select class="form-control" id="brand_select" style="min-width:180px">

                                        </select>
                                    </div>
                                </form>
                            </h4>
                            <h4 class="widget-title">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <label>店铺</label>
                                        <select class="form-control" id="cate_select" style="min-width:280px">

                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>距离</label>
                                        <select class="form-control" id="brand_select" style="min-width:280px">

                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <button type="button" class="btn rounded btn-default button_active" id="search">
                                            确认
                                        </button>
                                    </div>
                                </form>
                            </h4>
                        </header>
                    </div>
                </div>
            </div>
        <#--商圈总体情况-->
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-success panel-custom"
                         style="border-bottom-color:  #ba1b20;border-top-color: #ba1b20;">
                        <header class="widget-header">
                            <h4 style="text-align: center;width: 100%">商圈总体情况</h4>
                        </header>
                        <div class="panel-body">
                            <div class="col-sm-7">
                                <div class="widget-body" id="mapDiv" style="height: 405px">

                                </div><!-- .widget-body -->
                            </div>
                            <div class="col-sm-5">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <td></td>
                                        <td>本商圈</td>
                                        <td>城市平均</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>住宅面积</td>
                                        <td>100平方米</td>
                                        <td>100平方米</td>
                                    </tr>
                                    <tr>
                                        <td>商务楼面积</td>
                                        <td>100平方米</td>
                                        <td>100平方米</td>
                                    </tr>
                                    <tr>
                                        <td>商住比</td>
                                        <td>0.8</td>
                                        <td>0.8</td>
                                    </tr>
                                    <tr>
                                        <td>商圈面积</td>
                                        <td>100平方米</td>
                                        <td>100平方米</td>
                                    </tr>
                                    <tr>
                                        <td>住宅价格</td>
                                        <td>56000元/平方米</td>
                                        <td>56000元/平方米</td>
                                    </tr>
                                    <tr>
                                        <td>商务楼租金价格</td>
                                        <td>8元/平方米/天</td>
                                        <td>8元/平方米/天</td>
                                    </tr>
                                    <tr>
                                        <td>大型商场数量</td>
                                        <td>3</td>
                                        <td>3</td>
                                    </tr>
                                    <tr>
                                        <td>医院数量</td>
                                        <td>3</td>
                                        <td>3</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <#--外卖总体情况-->
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-success panel-custom"
                         style="border-bottom-color:  #ba1b20;border-top-color: #ba1b20;">
                        <div class="panel-body">
                            <div class="col-sm-6" style="padding: 0px">
                                <header class="widget-header">
                                    <h3 style="text-align: center;width: 100%">外卖情况总览</h3>
                                </header>
                                <div style="border-right:#000 solid 1px; ">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <td style="text-align: right;border: none">外卖店铺数</td>
                                            <td style="border: none">3,500 家</td>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td style="text-align: right;border: none">核心竞争对手店铺数</td>
                                            <td style="border: none">12 家</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;border: none">总销售额</td>
                                            <td style="border: none">1,000 万元</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;border: none">单店销售额</td>
                                            <td style="border: none">35,000 元/店</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;border: none">客单数</td>
                                            <td style="border: none">20,000 单</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;border: none">单店客单数</td>
                                            <td style="border: none">1,000 单/店</td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: right;border: none">平均客单价</td>
                                            <td style="border: none">60 元</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <header class="widget-header">
                                    <h3 style="text-align: center;width: 100%">与城市平均比较</h3>
                                </header>
                                <div style="height: 314px" id="myradar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <#--外卖总体情况-->
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-success panel-custom"
                         style="border-bottom-color:  #ba1b20;border-top-color: #ba1b20;">
                        <div class="panel-body">
                            <div class="col-sm-6" style="padding: 0px">
                                <header class="widget-header">
                                    <h3 style="text-align: center;width: 100%">商圈内热卖店铺</h3>
                                </header>
                                <div style="border-right:#000 solid 1px; ">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <td style="text-align: center;border: none">店铺名</td>
                                            <td style="text-align: center;border: none">销售额</td>
                                            <td style="text-align: center;border: none">客单数客单数同</td>
                                            <td style="text-align: center;border: none">比增长</td>
                                            <td style="text-align: center;border: none">客单价</td>
                                        </tr>
                                        </thead>
                                        <tbody id="tb_hotShop">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <header class="widget-header">
                                    <h3 style="text-align: center;width: 100%">商圈内热卖产品</h3>
                                </header>
                                <div>
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <td style="text-align: center;border: none">产品名</td>
                                            <td style="text-align: center;border: none">所属店铺</td>
                                            <td style="text-align: center;border: none">价格</td>
                                            <td style="text-align: center;border: none">销售额</td>
                                        </tr>
                                        </thead>
                                        <tbody id="tb_hotProduct">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section><!-- #dash-content -->
    </div><!-- .wrap -->

<#include "../static/footer.ftl" >

</main>
<!--========== END app main -->
<script src="/res/assets/js/bootstrap-datepicker.js"></script>
<script src="/res/assets/js/bootstrap-select.js"></script>
<script src="../../res/assets/js/bootstrap-table.js"></script>
<script type="text/javascript"
        src='http://webapi.amap.com/maps?v=1.4.3&key=9fa8c62b85a987698a515fbddee8efa7&&plugin=AMap.ToolBar'></script>
<script src="/res/assets/js/jquery.webui-popover.min.js"></script>
<script type="text/javascript" src='../res/assets/js/heatmap.js'></script>
<script type="text/javascript" src="/res/assets/js/jqcloud-1.0.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.datepicker').datepicker({
            format: 'yyyy-mm',
            startView: 1,
            todayHighlight: true,
            maxViewMode: 'years',
            minViewMode: 'months',
            endDate: new Date().Format('yyyyMM')
        });
        getLatestMonth();
        initShopMap(121.412, 31.3547);
        initRadar();
        initTb_hotShop();
        initTb_hotProduct();
    });
    function getLatestMonth() {
        $.ajax({
            type: "GET",
            url: "/service/view/get_latest_month",
            async: false,
            success: function (res) {
                if (res.code === "suc") {
                    try {
                        defaultMonth = res.data.yearMonth.toString().substring(0, 4)
                                + "-" + res.data.yearMonth.toString().substring(4, 6);
                        $('.datepicker').datepicker('update', defaultMonth);
                        $("#start_datapicker").datepicker('update', res.data.yearMonth.toString().substring(0, 4) + "-01");
                    } catch (e) {
                    }
                }
            }
        });
    }
    function initShopMap(longitude, latitude) {
        shop_colors = {}
        map = new AMap.Map('mapDiv', {
            resizeEnable: true,
            //zoom: 15,
            zooms: [12, 17],
            //根据传入的经纬度确定地图中心
            center: [longitude, latitude],
            dragEnable: true,
            zoomEnable: true
        });
        var color = "#f63843";
        var marker = new AMap.Marker({
            // content:marker_icon1,
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
            position: [longitude, latitude],
            visible: true
        });
        var infoWindow = new AMap.InfoWindow({
            closeWhenClickMap: true,
            isCustom: true,
            offset: new AMap.Pixel(0, -30)
        });
        marker.on('mouseover', function (e) {
            infoWindow.setContent("<div class='widget' " +
                    "style='opacity: 0.86;background-color: #565656'>" +
                    "<div class='widget-body'>" +
                    "<p class='text-muted' style='color: white'>店铺名：上海肯德基宅急送顾村店</p>\n" +
                    "<p class='text-muted' style='color: white'>店铺地址：上海市顾村镇水产西路957号1+2层</p>\n" +
                    "</div></div>");
            infoWindow.open(map, e.target.getPosition());
        });
        map.add(marker);
        map.setFitView();
    }

    function initRadar() {
        var mycharts = echarts.init(document.getElementById("myradar"))
        option = {
            tooltip: {},
            /*legend: {
                data: ['城市平均', '当前店铺']
            },*/
            radar: {
                // shape: 'circle',
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                indicator: [
                    {name: '外卖店铺数', max: 6500},
                    {name: '单店客单数', max: 16000},
                    {name: '核心竞争对手店均客单数', max: 30000},
                    {name: '客单价', max: 38000},
                    {name: '核心竞争对手店铺数', max: 90000}
                ]
            },
            series: [{
                name: '预算 vs 开销（Budget vs spending）',
                type: 'radar',
                // areaStyle: {normal: {}},
                data: [
                    {
                        value: [4300, 10000, 28000, 35000, 50000],
                        name: '城市平均'
                    },
                    {
                        value: [5000, 14000, 28000, 31000, 42000],
                        name: '当前店铺'
                    }
                ]
            }]
        };
        mycharts.setOption(option);
    }

    function initTb_hotShop() {
        $("#tb_hotShop").html("");

        $.ajax({
            type: "GET",
            url: "/service/data/getTb_hotShop",
            data: {
                start_month: "",
                end_month: "",
                restaurantID: ""
            },
            success: function (res) {
                if (res.code === "suc") {
                    try {
                        var resdata = res.data;
                        var html;
                        resdata.forEach(function (val, index) {
                            html = html + "<tr><td style='text-align:center;border: none'>" + val.store + "</td>" +
                                    "<td style='text-align:center;border: none'>" + val.slases + "</td>" +
                                    "<td style='text-align:center;border: none'>" + val.ta + "</td>" +
                                    "<td style='text-align:center;border: none'>" + val.tayoy + "</td>" +
                                    "<td style='text-align:center;border: none'>" + val.tc + "</td></tr>";
                        });
                        $("#tb_hotShop").html(html);
                    } catch (e) {
                    }
                }
            }

        });

    }

    function initTb_hotProduct() {
        $("#tb_hotProduct").html("");
        $.ajax({
            type: "GET",
            url: "/service/data/getTb_hotProduct",
            data: {
                start_month: "",
                end_month: "",
                restaurantID: ""
            },
            success: function (res) {
                if (res.code === "suc") {
                    try {
                        var resdata = res.data;
                        var html = "";
                        resdata.forEach(function (val, index) {
                            html = html + "<tr><td style='text-align:center;border: none'>" + val.product + "</td>" +
                                    "<td style='text-align:center;border: none'>" + val.store + "</td>" +
                                    "<td style='text-align:center;border: none'>" + val.tc + "</td>" +
                                    "<td style='text-align:center;border: none'>" + val.ta + "</td></tr>";
                        });
                        $("#tb_hotProduct").html(html);
                    } catch (e) {
                    }
                }
            }

        });

    }
</script>
<script type="text/javascript" src='../res/myassets/js/sorttable.js'></script>
</body>

</html>